<template>
    <view>
        <view class="free-filter">
            <view 
                class='free-filter-title'
                v-for='item in filterList' :key='item.id'
                :class='item.id==current?"active":""'
                @click='changeFilter(item.id)'
            >
                {{ item.name }}
            </view>
        </view>
        <view class='free-list'>
            <view class='new-list'>
                <view 
                    class='new-list-item'
                    v-for='item in courseList'
                    :key='item.id'
                >
                    <view class='new-item-img'>
                        <image :src="item.courseCover"></image>
                    </view>
                    <view class='new-item-main'>
                        <view class='new-item-title'>{{ item.courseName }}</view>
                        <view class='new-item-type'>{{ courseType(item.courseLevel) }}</view>
                        <view class='new-item-total'>
                            <view class='new-item-price' v-if='item.discountPrice==0'>
                                <view>免费</view>
                            </view>
                            <view class='new-item-price' v-else>
                                <view>限时优惠</view>
                                <view class='new-item-discountPrice'>¥ {{ item.discountPrice }}</view>
                            </view>
                            <view class='new-item-number'>{{ courseNumber(item.clicks) }}人学习</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
 
<script>
import { freeCourse } from '@/api/course.js'
import { mixin } from '@/mixins/mixin.js'
export default{
    mixins:[ mixin ],
    data () {
        return {
            current:1,
            courseList:[],
            filterList:[
                {id:1,name:'综合推荐'},
                {id:2,name:'最新'},
                {id:3,name:'浏览最多'}
            ],
            courseParams:{
                pageNum:1,
                pageSize:10,
                entity:{courseLevel:3}
            }
        }
    },
    mounted(){
        this.getCourse( this.courseParams );
    },
    methods:{
        getCourse( params ){
            freeCourse( params ).then(res=>{
                this.courseList = res.pageInfo.list;
            })
        },
        //切换filter
        changeFilter( id ){
            this.current = id;
            //综合
            if( id ==1 ){
                this.courseParams.sortBy = '';
            }else if( id== 2 ){ //最新
                this.courseParams.sortBy = 'price-desc';
            }else if( id ==3 ){ //浏览最多
                this.courseParams.sortBy = 'clicks-desc';
            }
            this.getCourse( this.courseParams  );
        }
    }
}
</script>
 
<style>
.free-filter{
    display: flex;
    padding:14rpx 0;
}
.free-filter-title{
    padding-left:44rpx;
    font-size: 28rpx;
    color: #A0A4AD;
}
.free-list{
    padding:14rpx;
}
.new-list-item{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:40rpx;
}
.new-list-item:after{
    content: '';
    position: absolute;
    bottom:-20rpx;
    margin-top:40rpx;
    width: 100%;
    border-bottom: 1px solid #000000;
    opacity: 0.15;
}
.new-item-img{
    width: 237rpx;
    height: 186rpx;
    border-radius: 12rpx;
    background-color: #ccc;
}
.new-item-img image{
    width: 100%;
    height: 100%;
    border-radius: 12rpx;
}
.new-item-main{
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 186rpx;
    padding-left:23rpx;
}
.new-item-title{
    font-size: 29rpx;
    font-weight: 400;
    color: #191919;
}
.new-item-type{
    font-size: 24rpx;
    font-weight: 400;
    color: #C5C5C5;
}
.new-item-total{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.new-item-price{
    display: flex;
    font-size: 21rpx;
    color: #FF4B5C;
    font-weight: 600;
}
.new-item-number{
    font-size: 21rpx;
    font-weight: 400;
    color: #A0A4AD;
}
.new-item-discountPrice{
    padding-left:21rpx;
}
.active{
    font-weight: 400;
    color: #000000;
}
</style>